<template>
  <div class="prizes-container">
    <div class="btn">
      <el-button type="primary" @click="handleAdd('add')">新增管理员</el-button>
    </div>
    <div class="main">
      <el-table :data="state.adminList" stripe border style="height: 100%">
        <el-table-column label="序号" width="100">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="昵称" />
        <el-table-column prop="account" label="账号" />
        <el-table-column label="操作" width="140">
          <template v-slot="scope">
            <el-button link type="primary" size="small" @click="handleAdd('edit', scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="delRow(scope.row)">
              <template #reference>
                <el-button text type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
        :pager-count="5" :page-sizes="[10, 50, 200, 800]" v-model:current-page="state.pagenation.pageNum" background
        v-model:page-size="state.pagenation.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="state.pagenation.total">
      </el-pagination>
    </div>
  </div>
  <Dialog ref="dialogRef" @refresh="getAdminTableData()" />
</template>

<script lang='ts' setup>
import { deleteAdminApi, AdminPageApi } from '@/api/admin';
import { ref, reactive, defineAsyncComponent  } from 'vue';

const Dialog = defineAsyncComponent(() => import("@/views/admin/dialog.vue"))
const dialogRef = ref()
const state = reactive({
  adminList: [],
  pagenation: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
})

const getAdminTableData = () => {
  AdminPageApi({ ...state.pagenation }).then(({ content: { total, list, pageNum, pageSize } }: any) => {
    state.adminList = list;
    state.pagenation.total = total;
    state.pagenation.pageNum = pageNum;
    state.pagenation.pageSize = pageSize;
  })
}

const handleAdd = (type: string, data?: any) => {
  dialogRef.value.openDialog(type, data)
}

const delRow = (row: any) => {
  deleteAdminApi(row.id).then((res) => {
    getAdminTableData()
  })
}

// 分页改变
const onHandleSizeChange = (val: number) => {
  state.pagenation.pageSize = val;
  getAdminTableData();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.pagenation.pageNum = val;
  getAdminTableData();
};

defineExpose({
  getAdminTableData,
});
</script>
<style scoped lang='scss'>
.prizes-container {
  height: calc(100vh - 111px);

  .btn {
    padding: 10px;
  }

  .main {
    padding: 10px;
    height: calc(100% - 110px);
  }

  .pagination {
    padding: 10px;

  }
}
</style>@/api/prize